<template>
    <!--动态class的语法 {属性名：变量名 布尔值}-->
    <p :class="{red_str: bool}">动态展现class的样式</p>
    <p :class="{ red_str: bool, helloword: bool2 }">class的样式转换</p>
    <p :class="{ red_str: bool, helloword: bool2 }">class的样式对象封装展示</p>
    <p :class="styleObj">style的对象封装展现</p>
    <hr style="border: 4px solid black;">
    <!--动态style
        :style="{属性名：变量名}"
    -->
    <p style="color:red; font-size: 50px;">原始style的样式展现1</p>
    <p :style="{color:'black',fontSize:'20px'}">动态展现style的样式2</p>
    <p :style="{ backgroundColor: 'aquamarine' }">动态展现style的样式3</p>
    <p :style="{ color: colorStr, fontSize: fontSize, 'backgroundColor': bgColor }">动态style之多个style</p>
</template>
<script>
export default {
    data() {
        return {
            bool: true,
            bool2: false,
            styleObj: {
                red_str: false,
                helloword: true
            },
            colorStr: 'blue',
            fontSize: '40px',
            bgColor: 'pink'
        }
    }
}

</script>
<style scoped>
.red_str{
    color: red;
    font-size: 30px;
}
.helloword{
    background-color: aquamarine;
}

</style>